 /*
 * @description: 店铺数据
 * @Author: along
 * @Date: 2021-05-24
 * @Last Modified by: along
 * @Last Modified time: 2021-05-24
 */
<template>
    <div class="shopDataList">
        <div class="content-wrapper">

            <!-- header -->
            <div class="header">
                <div class="header-title">
                    店铺数据
                </div>
            </div>

            <!-- 筛选-->
            <div class="filter-view">
                <div class="header-new-box">
                    <p class="header-new-box-title">店铺名称/编号/企业名称：</p>
                    <el-input
                        v-model="filterData.keyword"
                        placeholder="请输入店铺名称或编号或企业名称"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
            </div>
            <!--筛选-->

            <!-- table -->
            <el-table
                :data="tableData"
                height="100%"
                style="width: calc(100% - 64px);marginLeft: 32px"
                ref="tempLateName"
                class="data-table"
                @sort-change="handleSortChanged"
                v-loading="loading"
            >
                <el-table-column
                    type="index"
                    label="序号"
                    width="80"
                    align="center"
                />
                <el-table-column
                    prop="shop_title"
                    label="店铺名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="150"
                />
                <el-table-column
                    prop="shop_no"
                    label="店铺编号"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="160"
                />
                <el-table-column
                    prop="company_name"
                    label="企业名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="150"
                />
                <el-table-column
                    prop="total_sale_count"
                    label="总销量"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    sortable="custom"
                    :width="130"
                    :render-header="renderHeader"
                >
                    <template slot-scope="scope">
                        <div class="__zsdx_wrap">
                            {{ scope.row.total_sale_count }}
                            <p
                                class="__zsdx_check"
                                @click="$refs.checkShopSale.show(scope.row)"
                            >
                                (查看)
                            </p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="after_sales_orders_count"
                    label="售后订单"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    sortable="custom"
                    :width="150"
                    :render-header="renderHeader2"
                >
                    <template slot-scope="scope">
                        <div class="__zsdx_wrap">
                            {{ scope.row.after_sales_orders_count }}
                            <p
                                class="__zsdx_check"
                                @click="$refs.checkSaleOrder.show(scope.row)"
                            >
                                (查看)
                            </p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="dispute_order_count"
                    label="纠纷订单量"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    sortable="custom"
                    :width="150"
                    :render-header="renderHeader3"
                >
                    <template slot-scope="scope">
                        <div class="__zsdx_wrap">
                            {{ scope.row.dispute_order_count }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="total_activity_count"
                    label="活动报名次数"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="150"
                    :render-header="renderHeader4"
                >
                    <template slot-scope="scope">
                        <div class="__zsdx_wrap">
                            {{ scope.row.total_activity_count }}
                            <p
                                class="__zsdx_check"
                                @click="$refs.checkApplyNumber.show(scope.row)"
                            >
                                (查看)
                            </p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="total_days_of_login"
                    label="登录总天数"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    sortable="custom"
                    :width="150"
                    :render-header="renderHeader5"
                >
                    <template slot-scope="scope">
                        <div class="__zsdx_wrap">
                            {{ scope.row.total_days_of_login }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="avg_evaluate_score"
                    label="客服满意度"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    sortable="custom"
                    :width="150"
                    :render-header="renderHeader6"
                >
                    <template slot-scope="scope">
                        <div class="__zsdx_wrap">
                            {{ Number(scope.row.avg_evaluate_score).toFixed(2) }}分
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="avg_send_out_goods_duration"
                    label="平均发货时间"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    sortable="custom"
                    :width="150"
                    :render-header="renderHeader7"
                >
                    <template slot-scope="scope">
                        <div class="__zsdx_wrap">
                            {{ scope.row.avg_send_out_goods_duration | filterDate(SELF) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="评价平均星级"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                    :width="120"
                    :render-header="renderHeader8"
                >
                    <template slot-scope="scope">
                        <div class="__zsdx_wrap">
                            <p
                                class="__zsdx_check"
                                @click="$refs.checkShopStar.show(scope.row)"
                            >
                                查看
                            </p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="商品改价记录"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                    :width="120"
                >
                    <template slot-scope="scope">
                        <div class="__zsdx_wrap">
                            <p
                                class="__zsdx_check"
                                @click="$refs.checkChangeprice.show(scope.row)"
                            >
                                查看
                            </p>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- /table -->

            <!-- /分页 -->
            <div class="pagination-wrapper clearfixNew">
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    background
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>

        <!-- 查看总销量弹窗 -->
        <check-shop-sale ref="checkShopSale" />

        <!-- 查看售后订单 -->
        <check-sale-order ref="checkSaleOrder" />

        <!-- 查看获得报名次数 -->
        <check-apply-number ref="checkApplyNumber" />

        <!-- 评价平均星级 -->
        <check-shop-star ref="checkShopStar" />

        <!-- 改价记录 -->
        <check-change-price ref="checkChangeprice" />
    </div>
</template>

<script>
import {back} from '@/mixin/back';
import checkShopSale from '@/components/shop/check-shop-sale.vue';
import checkSaleOrder from '@/components/shop/check-sale-order.vue';
import checkApplyNumber from '@/components/shop/check-apply-number.vue';
import checkShopStar from '@/components/shop/check-shop-star.vue';
import checkChangePrice from '@/components/shop/check-change-price.vue';
export default {
    mixins: [back],
    components: {
        checkShopSale,
        checkSaleOrder,
        checkApplyNumber,
        checkShopStar,
        checkChangePrice
    },
    data() {
        return {
            loading: false,
            SELF: this,
            filterData: {
                keyword: ''
            },
            sortData: {
                sort_field: 1,
                sort_type: 1
            },
            tableData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            authResult: {}
        };
    },
    filters: {
        filterDate (val, SELF) {
            return SELF.fnMinuteFormate(val);
        }
    },
    mounted() {

        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {title: '店铺管理'}, {title: '店铺数据'}]);
        this.authResult = this.$route.meta.authResult;
        this.getTableData();
    },
    methods: {
        /**
         * @description 获取表格数据
         */
        getTableData(page) {
            this.loading = true;
            this.$post('/student/statistic_shop%5Cget_shop_statistic_list', {
                page_id: page || this.page.now_page,
                keyword: this.filterData.keyword,
                sort_field: this.sortData.sort_field,
                sort_type: this.sortData.sort_type
            }, resp => {
                if (resp.code === 1) {
                    this.tableData = resp.data.list;
                    this.page = {
                        ...resp.data.page
                    };

                    this.loading = false;
                } else {
                    this.$notify({
                        title: '失败',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 数据排序
         */
        handleSortChanged(data) {
            let sortTypeMap = {
                ascending: 0,
                descending: 1
            };

            let sortFieldMap = {
                total_sale_count: 1,
                after_sales_orders_count: 2,
                dispute_order_count: 3,
                total_days_of_login: 4,
                avg_evaluate_score: 5,
                avg_send_out_goods_duration: 6
            };

            if (data.order) {
                this.sortData.sort_field = sortFieldMap[data.prop];
                this.sortData.sort_type = sortTypeMap[data.order];
            } else {
                this.sortData.sort_field = '';
                this.sortData.sort_type = '';
            }

            this.getTableData();
        },

        /**
         * 指定范围时间戳转换小时/分钟/秒
         * @param   {val}           Number      //时间戳
         * @param   {Booleanc}      type        //false:小时/分钟/秒  true:天/小时/分钟/秒
         */
        fnMinuteFormate(second){
            const days = Math.floor(second / 86400);
            const hours = Math.floor((second % 86400) / 3600);
            const minutes = Math.floor(((second % 86400) % 3600) / 60);
            const seconds = Math.floor(((second % 86400) % 3600) % 60);
            const forMatDate = {
                days: days,
                hours: hours < 10 ? ('0' + hours) : hours,
                minutes: minutes < 10 ? ('0' + minutes) : minutes,
                seconds: seconds < 10 ? ('0' + seconds) : seconds
            };

            return forMatDate.days + '天' + forMatDate.hours + ':' + forMatDate.minutes + ':' + forMatDate.seconds;
        },

        /**
         * @description 设置表头
         */
        renderHeader(h){
            return h('span', {}, [
                h('span', { "class": '__title' }, '总销量'),
                h('el-popover', { props: { popperClass: 'zd-popper-class', placement: 'top-start', width: '302', trigger: 'hover', content: '店铺销售商品数量总计（统计已付款订单，不统计待付款订单）；' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },
        renderHeader2(h){
            return h('span', {}, [
                h('span', { "class": '__title' }, '售后订单'),
                h('el-popover', { props: { popperClass: 'zd-popper-class', placement: 'top-start', width: '302', trigger: 'hover', content: '统计用户发起退款订单，退货退款订单，换货订单数量总和；' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },
        renderHeader3(h){
            return h('span', {}, [
                h('span', { "class": '__title' }, '纠纷订单量'),
                h('el-popover', { props: { popperClass: 'zd-popper-class', placement: 'top-start', width: '302', trigger: 'hover', content: '统计用户发起平台介入订单数量；' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },
        renderHeader4(h){
            return h('span', {}, [
                h('span', { "class": '__title' }, '活动报名次数'),
                h('el-popover', { props: { popperClass: 'zd-popper-class', placement: 'top-start', width: '302', trigger: 'hover', content: '统计商家报名平台大促次数，倒计食，折扣专区，0元购，秒杀活动，寝室专区报名次数总和；' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },
        renderHeader5(h){
            return h('span', {}, [
                h('span', { "class": '__title' }, '登录总天数'),
                h('el-popover', { props: { popperClass: 'zd-popper-class', placement: 'top-start', width: '302', trigger: 'hover', content: '统计商家登录商家后台总天数；' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },
        renderHeader6(h){
            return h('span', {}, [
                h('span', { "class": '__title' }, '客服满意度'),
                h('el-popover', { props: { popperClass: 'zd-popper-class', placement: 'top-start', width: '302', trigger: 'hover', content: '用户给商家客服评分平均值（不统计未评分的客服咨询次数，计算方法：用户评分总和/已评分的客服咨询总次数，包含系统自动回复的用户评分，保留两位小数点）；' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },
        renderHeader7(h){
            return h('span', {}, [
                h('span', { "class": '__title' }, '平均发货时间'),
                h('el-popover', { props: { popperClass: 'zd-popper-class', placement: 'top-start', width: '302', trigger: 'hover', content: '统计商家每笔待收货订单发货时间平均值（计算方法：待发货状态变更为待收货时间）；' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },
        renderHeader8(h){
            return h('span', {}, [
                h('span', { "class": '__title' }, '评价平均星级'),
                h('el-popover', { props: { popperClass: 'zd-popper-class', placement: 'top-start', width: '302', trigger: 'hover', content: '统计用户评价星级平均值。' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style scoped lang="less">
.shopDataList {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;
    }

    .__zsdx_wrap {
        display: flex;
        align-items: center;
        .__zsdx_check {
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            cursor: pointer;
            margin-left: 2px;
            &:hover {
                text-decoration: underline;
            }
        }
    }

    /*header*/

    .header {
        height: 68px;
        padding: 24px;
        box-sizing: border-box;
        box-shadow: 0px -1px 0px 0px #F0F2F5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #F0F2F5;

        .header-title {
            color: #333333;
            font-size: 20px;
            height: 20px;
            font-weight: 500;
            position: relative;
            margin: 24px 0 24px 12px;

            &::before {
                content: '';
                position: absolute;
                left: -8px;
                top: -1px;
                width: 3px;
                height: 20px;
                background: #1890FF;
            }
        }
    }
    .btn-view {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px 24px 0;
    }

    /*筛选*/

    .filter-view {
        margin: 24px 0;
        display: flex;
        align-items: center;

        .header-new-box {
            display: flex;
            align-items: center;
            color: #606266;
            white-space: nowrap;
            margin-left: 32px;

            &-title {
                margin-right: 2px;
                white-space: nowrap;
            }
        }
    }

    .status-wrapper {
        display: flex;
        align-items: center;

        .status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-right: 5px;

            &.success {
                background: #4CD964;
            }

            &.danger {
                background: #FF3030;
            }

            &.warning {
                background: #FFA72D;
            }

            &.normal {
                background: #C2C2C2;
            }
        }
    }

    /* 分页 */

    .pagination-wrapper {
        padding: 10px 32px;

        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }

    .text-button {
        width: 180px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
    }
    // 表格
    .data-table {
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        // 操作按钮
        .option-btn-group {
            .el-button {
                margin-left: 0;
                margin-right: 10px;
            }
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
    }
    /deep/ .el-table__fixed-right {
        right: 6px!important;
    }

    .el-popover-hover {
      border: none;
      background: transparent !important;
      border: none;
      outline: none;
      margin-left: -20px;
  }
}
</style>

<style lang="less">
.shopDataList {
    .el-icon-question {
        color: rgba(0, 0, 0, 0.3);
        margin-left: 2px;
    }
    .el-table .caret-wrapper {
        top: -1px;
    }
    .__title {
        color: rgba(51, 51, 51, 1);
        font-weight: 500;
    }
    .has-gutter {
        th .cell {
            color: rgba(51, 51, 51, 1);
            font-weight: 500;
        }
    }
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding-left: 32px;
        padding-right: 32px;
    }
    .__model {
        .el-table__body-wrapper {
            height: auto !important;
        }
    }
}

.clearfixNew {
    .btn-prev, .btn-next {
        background-color: transparent !important;
    }
    .el-pager .active {
        background-color: transparent !important;
        color: #20A0FF !important;
    }
    .el-pager .number {
        background-color: transparent !important;
        color: #606266;
    }
    .el-pagination__jump {
        margin-left: 20px;
    }
}
.zd-popper-class {
    text-align: left !important;
}
</style>
